<template>
  <el-row :gutter="16">
    <el-col :="grid" class="ivu-mb" v-for="(item, index) in statList" :key="index">
      <el-card shadow="never" :padding="0">
        <template #header>
          <div class="card-header">
            <span>{{ item.title }}</span>
            <el-tag type="success">{{ item.date }}</el-tag>
          </div>
        </template>
        <div>
          <div class="number">{{ item.today }}</div>
          <div class="ivu-pt-8" style="height: 42px">
            <span>昨日 {{ item.yesterday }}</span>
            <span class="ivu-mr">
              日环比 {{ Number(item.today_ratio) }}%
              <el-icon :size="20" class="iconColor" :class="[Number(item.today_ratio) >= 0 ? ' ' : 'on']">
                <component :is="Number(item.today_ratio) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
              </el-icon>
            </span>
          </div>
          <el-divider />
          <div class="total">
            <el-row>
              <el-col :span="12">{{ item.total_name }}</el-col>
              <el-col :span="12" class="ivu-text-right">{{ item.total }}</el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { HomeApi } from '@/api/home'
import { IHome } from '@/api/home/type'
import { onMounted, ref } from 'vue'

const grid = {
  xl: 6,
  lg: 6,
  md: 12,
  sm: 12,
  xs: 24
}
const statList = ref<IHome.StatModel[]>([])

// interface ExcessStyle {
//   color: string
//   backgroundColor: string
// }
// 统计数据
const getStat = async () => {
  try {
    statList.value = await HomeApi.getStat()
  } catch (error) {}
}
onMounted(() => {
  getStat()
})
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.ivu-mb {
  margin-bottom: 14px;
}
.number {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
}

.iconColor {
  color: #f53f3f;
}

.iconColor.on {
  color: #0fc6c2;
}

.ivu-mr {
  display: inline-block;
  margin-left: 16px !important;
}

.ivu-text-right {
  text-align: right;
}
::v-deep.el-card__header {
  border-bottom: none !important;
  padding-bottom: 0;
}
.el-divider--horizontal {
  margin: 0 0 12px 0;
}
.total {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
</style>
